<template>
    <div class="mv">
        <div class="mv-title">
            最新MV
        </div>
        <div class="mvlist" ref="mvlist">
            <ul>
                <li v-for="(item,index) in mvList" :key="item.index">
                    <div class="imgs" :style="{'background-image':'url('+item.cover+')'}"
                    v-show="playNum!=index"
                    @click="getMvUrlFun(index,item.id)">
                        <span class="iconfont icon-arrow-right-filling"></span>
                    </div>
                    <div class="imgs" v-show="playNum==index" @click.stop="mvPlayend">
                        <video controls :ref="'video'+index" :src="item.mvurl"
                        @loadeddata="loadeddataPlay"></video>
                    </div>
                    <p> <span>{{item.name}} </span>
                        <span class="more-btn" @click="jumpDetail(item.id,index)">
                           
                           评论 <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                            
                            </span>
                        
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {getMvFirst,getMvUrl,} from "../api/mv"
export default {
    data() {
        return{
            mvList: [], //mv数据
            flag:true, //防抖
            offset:0, //偏移数量，用于分页 请求参数
            playNum:null, // 播放视频时 关闭图片 标志
        }
    },
    //过滤数量
    filters: {
    //过滤歌曲数量
    playCount(value) {
      let m = value > 10000 ? parseInt(value / 10000)+ '万' : value;
      return m;
    }
    },
    created() {
        //获取mv视频图文信息
        getMvFirst({
                    // limit: 5,
                    offset:this.offset
                }).then(data=>{
                this.mvList=data.data;
                
            })

          
    },
    methods: {
        jumpDetail(id,index) {
            this.$router.push({name: 'HomeMv',params: {id,index,musicListMv:this.mvList}});
        },
        //获取播放mv视频url
        getMvUrlFun(index,id) {
            // 如果当前视频正在播放 考虑0 也为false
            if(this.playNum || this.playNum==0) {
                //暂停视频 获取到video对象
                this.$refs['video' + this.playNum][0].pause();
                
            }
            this.playNum=index;
            //获取视频播放地址
            getMvUrl({id}).then(data=>{
                
                // this.mvList[index].mvurl = data.data.url; 单单赋值不能更新property 
                //将数据设置更新到property中 , 
                this.$set(this.mvList[index],"mvurl",data.data.url);
            })
            
        },
        // 滚动添加 mv视频数据
        addMvData() {
            //防抖函数
            if(this.flag) {
                //改变判断条件
                this.flag=false;
                this.offset+=5; //偏移量 
                
                getMvFirst({
                    limit: 5,
                    offset:this.offset
                }).then(data=>{
                // 
                // 滚动添加数据 原来获取的数据与添加的数据数组连接成数组 
                this.mvList=this.mvList.concat(data.data);
                //获取数据后 改变进入判断的条件
                this.flag=true;
            })
            }
        },
        //点击暂停视频播放
        mvPlayend() {
            //拿到当前正在播放的视频的dom对象
            this.$refs['video'+this.playNum][0].pause();
            this.playNum=null;
        },
        //播放视频
        loadeddataPlay(event) {
            // 点击的事件目标 播放视频
            event.target.play();
        },
        //滚动条监听
        handleScroll() {
            //滚动条偏移量
            let scrollTop=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 
            //获取div dom对象 
            let lis=this.$refs.mvlist.getElementsByTagName('li');
            //视频数据条数
            let num =lis.length;
            let liHeight=lis[num-3].offsetTop;
            // 
            //如果滚动距离大于 num-3条数据偏移量 就触发
            if(scrollTop > liHeight){
                //添加mv视频数据
                this.addMvData();
            }

        }
    },
    mounted() {
        this.$nextTick(()=>{
            //监听页面滚动事件
            window.addEventListener("scroll",this.handleScroll)
        })
    },
    //移除监听滚动条事件
    beforeDestroy(){
        window.removeEventListener("scroll",this.handleScroll);
    }
}
   
</script>

<style lang="less" scoped>
@import url('../assets/css/base.less');

 
.mv-title {
  position: sticky;
  top: 0;
  z-index:999;
  text-align: center;
  height:50px;
  line-height:50px;
  font-size:16px;
  color:#fff;
  background-color: @mainColor;
}
.mvlist {
    width:100%;
    li{
        .imgs{
            width:100%;
            height:200px;
            // background-color:#e4393c;
            background-repeat: no-repeat;
            background-size: cover;
            position:relative;
            span{
                position: absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
                margin:auto;
                width:40px;
                height:40px;
                text-align:center;
                line-height:40px;
                background:rgba(0,0,0,0.5);
                border-radius:50%;
                color:#fff;
                font-size:24px;
            }
            video{
                height:200px;
                margin: 0 auto;
                display: block;
                
            }
        }
        p{
            font-size:14px;
            padding:15px 20px;
            text-align:left;
            span{
                margin-right: 10px;
            }
            .more-btn{
                float: right;
            }
        }
    }
}
</style>